<template>
  <BasicModal
    v-bind="$attrs"
    wrapClassName="hide-modal-header is-absolute"
    :maskStyle="{ position: 'absolute' }"
    @register="taskRegister"
    :width="750"
    centered
    :getContainer="getDelContainer"
    @ok="confirmSubmit"
    @cancel="resetModal"
  >
    <div class="box-modal">
      <a-alert message="温馨提示：是否确定提交任务，提交后任务即刻执行" type="warning" show-icon />
      <div class="modal-box">
        <div class="modal-detail">
          <div class="detail-item">
            <div class="item-label">部署环境</div>
            <div class="item-value" v-if="modalInfo.record.deployEnvir === 0">灰度</div>
            <div class="item-value" v-else-if="modalInfo.record.deployEnvir === 1">生产</div>
          </div>
          <div class="detail-item">
            <div class="item-label">包名称</div>
            <div class="item-value">
              {{ modalInfo.record.taskName }} {{ modalInfo.record.taskDesc ? `(${modalInfo.record.taskDesc})` : '' }}
            </div>
          </div>
        </div>
        <div class="modal-detail">
          <div class="detail-item">
            <div class="item-label">命名空间</div>
            <div class="item-value">{{ modalInfo.record.nameSpace }}</div>
          </div>
          <div class="detail-item">
            <div class="item-label">副本数</div>
            <div class="item-value">{{ modalInfo.record.replicas }}</div>
          </div>
        </div>

        <div class="modal-detail">
          <div class="detail-item">
            <div class="item-label">CPU核数</div>
            <div class="item-value">{{ modalInfo.record.cpu ? `${modalInfo.record.cpu}核` : '' }}</div>
          </div>
          <div class="detail-item">
            <div class="item-label">内存</div>
            <div class="item-value">{{ modalInfo.record.ram }}</div>
          </div>
        </div>
        <div class="modal-detail">
          <div class="detail-item">
            <div class="item-label">镜像名称</div>
            <div class="item-value">{{ modalInfo.record.imageName }}</div>
          </div>
          <div class="detail-item">
            <div class="item-label">镜像版本</div>
            <div class="item-value">{{ modalInfo.record.taskTag }}</div>
          </div>
        </div>
        <div class="modal-detail">
          <div class="detail-item detail-block">
            <div class="item-label">镜像地址</div>
            <div class="item-value">{{ modalInfo.record.imagePath }}</div>
          </div>
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { BasicModal, useModalInner } from '@/components/Modal'
import { message } from 'ant-design-vue'
import { cloneDeep } from 'lodash-es'
import api from '@/api'

const { deployTask } = api

const emit = defineEmits(['operateSuccess', 'register'])

const modalInfo = reactive<any>({
  record: {}
})

const [taskRegister, { setModalProps, changeOkLoading, closeModal }] = useModalInner((data) => {
  modalInfo.record = cloneDeep(data.record)
})

const getDelContainer = () => {
  return document.querySelector('.page-wrapper')
}
const resetModal = () => {
  changeOkLoading(false)
}
// 确认
const confirmSubmit = async () => {
  try {
    changeOkLoading(true)
    let record = modalInfo.record
    await deployTask({
      cpu: record.cpu,
      imageName: record.imageName,
      imagePath: record.imagePath,
      imageTag: record.taskTag,
      memory: record.ram,
      nameSpace: record.nameSpace,
      packageName: record.taskName,
      replicas: record.replicas
    })
    closeModal()
    resetModal()
    message.success('任务部署成功')
    emit('operateSuccess')
  } catch (error) {
    changeOkLoading(false)
  }
}
</script>
<style lang="less" scoped>
.box-modal {
  padding: 20px 10px;
  .modal-box {
    margin-top: 20px;
    .modal-detail {
      display: flex;
      margin-bottom: 30px;
      word-break: break-all;
      word-wrap: break-word;
      &:last-child {
        margin-bottom: 0;
      }
      .detail-item {
        width: 50%;
        display: flex;
        .item-label {
          width: 80px;
          flex-shrink: 0;
          color: #979ca7;
        }
        .item-value {
          padding-right: 16px;
        }
      }
      .detail-block {
        width: 100%;
      }
    }
  }
}
</style>
